<template>
  <div class="image-text-preview">
    <div class="groups">
      <div
        class="groups__item"
        :class="{ 'groups__item--active': item.id === activeItem }"
        v-for="item in data"
        @click="handelClick(item)"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="form" v-if="form">
      <el-form :model="form" label-width="auto">
        <el-form-item label="案例图片">
          <CustomUpdate :file-list="form.pic" multiple accept="image/*" :max-size="200000000" :max-length="1000000" disabled />
        </el-form-item>
        <el-form-item label="案例视频">
          <CustomUpdate
            :file-list="form.video"
            multiple
            fileType="video"
            item-size="113px"
            accept="video/*"
            :max-size="200000000"
            :max-length="1000000"
            disabled
          />
        </el-form-item>
        <el-form-item label="文字描述">
          <el-input
            v-model="form.desc"
            type="textarea"
            placeholder="请输入标准描述"
            :maxlength="200"
            :autosize="{ minRows: 4 }"
            show-word-limit
            disabled
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CustomUpdate from "@/views/system/designForm/ImageVideoUpload.vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});

const form = ref(null);

const activeItem = ref("");
const handelClick = item => {
  form.value = { ...item };
  activeItem.value = item.id;
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";
.image-text-preview {
  @include flex;
  overflow: hidden;
  height: 100%;
  .groups {
    flex-shrink: 0;
    width: 220px;
    overflow-y: auto;
    border-right: 1px solid #409eff;
    &__item {
      position: relative;
      padding-right: 20px;
      text-align: right;
      font-size: 14px;
      color: #86909c;
      line-height: 40px;
      cursor: pointer;
      &:after {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        content: "";
        width: 4px;
        height: 24px;
        background-color: #1684fc;
        border-radius: 2px;
      }
      &:hover {
        @extend .groups__item--active;
      }
      &--active {
        color: #409eff;
        background-color: #e6f7ff;
        &:after {
          display: block;
        }
      }
    }
  }
  .form {
    flex: 1;
    overflow-y: auto;
    margin-left: 20px;
  }
}
</style>
